<template>
  <el-card class="app-card-item relative" shadow="hover">
    <i v-if="data.isTop" class="absolute app-icon-top" />
    <div class="title mb-3">
      <h3>
        <a :href="url" target="_blank">{{ data.title }}</a>
      </h3>
    </div>
    <a :href="url" target="_blank">
      <el-image class="image" :src="data.coverUrl ? data.coverUrl : 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'">
        <template #error>
          <div class="image-slot">
            <Icon name="ep:picture" />
          </div>
        </template>
      </el-image>
    </a>
    <div class="meta flex justify-between mt-3">
      <div class="author">
        <el-space>
          <Icon name="ep:avatar" />
          <span class="name">
            <nuxt-link v-if="data.homepage" target="_blank" :to="data.homepage">{{ data.author }}</nuxt-link>
            <template v-else>{{ data.author }}</template>
          </span>
        </el-space>
      </div>
      <div class="time">{{ data.createTime.slice(0, 11) }}</div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
interface EditProps {
  data: Article.Detail
}

const props = withDefaults<EditProps, any>(defineProps<EditProps>(), {
  data: {
    github: '',
    gitee: '',
  } as Article.Detail,
})
const { data } = toRefs(props)
// const url = `${data.github || data.gitee}`
const url = `${import.meta.env.VITE_API_BaseURL}/post/${data.value.id}`
</script>
<style lang="scss" scoped></style>
